<template>
  <div class="parent">
    <echartsDom v-if="isShowEcharts" :width="'100%'" :height="'150px'" :option="option" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
import echartsDom from "./echartsDom.vue";

import { deviceStat } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {}
});
const { option } = toRefs(state);
const getoptions = () => {
  deviceStat({
    classCode: "WATER"
  }).then((response: any) => {
    console.log(response);
    isShowEcharts.value = true;
    option.value = {
      color: ["#5792F3 ", "#ffca45", "#ccc", "#28D892", "#FF5639"],
      grid: {
        left: "20px",
        top: "40px",
        right: "10px",
        bottom: "10px",
        containLabel: true
      },
      // legend: {},
      tooltip: {
        confine: true
      },
      xAxis: {
        type: "category",
        boundarGap: false,
        data: ["正常", "报警", "下线", "故障"]
      },
      yAxis: {
        name: "台",
        type: "value"
      },
      series: [
        {
          data: [
            response.deviceStatusStat.normal,
            response.deviceStatusStat.warn,
            response.deviceStatusStat.standby,
            response.deviceStatusStat.fault
          ],
          type: "bar",
          name: "数量",
          stack: "total",
          barWidth: "25px",
          emphasis: {
            focus: "series"
          },
          itemStyle: {
            normal: {
              color: function (params) {
                let colorList = ["#28D892", "#ffca45", "#ccc", "#FF4355"];
                let colorItem = colorList[params.dataIndex];
                return colorItem;
              }
            }
          }
        }
      ]
    };
  });
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
